<template>
    <div style="min-width:809px">
        <div class="vs-search-box" style="padding: 24px 5px 0 0px;">
            <el-form ref="form" :inline="true" :model="paging" label-width="90px">
                <el-form-item label="姓名：">
                    <el-input style="width:300px" v-model="paging.username"></el-input>
                </el-form-item>
                <el-form-item label="时间：">
                    <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" @change="pickerDate" :picker-options="pickerOptions">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="" style="float: right">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <div class="title-left"> 分销列表 </div>
                <el-button @click="dialogVisible=true" style="margin-left:auto;" type="primary">新增</el-button>
            </div>
            <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column width="60px" type="selection"></el-table-column>
                <el-table-column width="60px" label="序号" type="index"></el-table-column>
                <el-table-column prop="username" label="业务员姓名" width="130"> </el-table-column>
                <el-table-column prop="code" label="业务码" min-width="70"> </el-table-column>
                <el-table-column prop="title" label="公司名称" min-width="140"> </el-table-column>
                <el-table-column label="渠道" min-width="60">
                    <template slot-scope="scope">
                        {{scope.row.type | typeName}}
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="时间" min-width="150"> </el-table-column>
                <el-table-column label="邀请二维码" min-width="130">
                    <template slot-scope="scope">
                        <el-image class="image-thumbnail" :src="scope.row.url" fit="cover" :preview-src-list="[scope.row.url]"> </el-image>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="109" label="操作">
                    <template slot-scope="scope">
                        <!-- <span @click="setRow(1,scope.row)" class="tab-table-text">修改</span> -->
                        <span @click="setRow(2,scope.row)" class="tab-table-text">记录</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="total, sizes, prev, pager, next, jumper" :total="paging.total">
                </el-pagination>
            </div>
        </div>

        <el-dialog :title="ruleForm.id?'修改':'添加'+'分销'" :visible.sync="dialogVisible" :before-close="handleClose" width="570px">
            <el-form label-position="left" :rules="rules" ref="ruleForm" label-width="80px" :model="ruleForm">
                <el-form-item label="姓名" prop="username">
                    <el-input v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="企业名称" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="渠道" prop="type">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio :label="1">内部</el-radio>
                        <el-radio :label="2">外部</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="服务号" prop="code">
                    <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取消</el-button>
                <el-button type="primary" :loading="isBtn" @click="subitm()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="分销记录" :visible.sync="isInfo">
            <!-- width="570px" -->
            <el-table :data="recordList" v-loading="loading2" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column prop="company.title" label="公司名称"> </el-table-column>
                <el-table-column prop="create_time" label="邀请时间"> </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isInfo = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            recordList: [],
            loading: false,
            loading2: false,
            isBtn: false,
            isInfo: false,
            dialogVisible: false,
            paging: {
                username: '',//姓名
                start_time: '',//开始时间
                end_time: '',//结束时间
                page: 1,
                total: 400,
                limit: 10,
            },
            ruleForm: {
                username: '',
                title: '',
                type: '',
                code: '',
            },
            rules: {
                username: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
                title: [{ required: true, message: '请输入企业名称', trigger: 'blur' },],
                type: [{ required: true, message: '请选择渠道', trigger: 'change' },],
                code: { required: true, message: '请输入服务码', trigger: 'blur' }
            },
            form: {
                date: "",
            },
            tableData: []
        };
    },
    filters: {
        typeName(val) {
            switch (val) {
                case 1:
                    val = '内部'
                    break;
                case 2:
                    val = '外部'
                    break;
            }
            return val;
        }
    },
    created() {
        this.handleCurrentChange(1);
    },
    methods: {
        async setRow(type, row) {
            if (type == 1) {
                this.dialogVisible = true;
                setTimeout(() => {
                    this.ruleForm = Object.assign({}, row);
                }, 200);
            } else if (type == 2) {
                this.isInfo = true;
                this.loading2 = true;
                let { code, data } = await this.$Http.catdistribution({
                    id: row.id
                })
                this.loading2 = false;
                if (code) {
                    this.recordList = data;
                } else this.recordList = [];
            }
        },
        subitm() {
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                this.isBtn = true;
                let { code } = await this.$Http.setDistribution(this.ruleForm);
                this.isBtn = false;
                if (code) {
                    this.$message.success(this.ruleForm.id ? '修改' : '添加' + '成功');
                    this.handleCurrentChange(1);
                    this.handleClose();
                }
            });
        },
        handleClose(dom) {
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom && dom();
        },
        async repairGetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getDistribution(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {//重置
            this.paging = this.$options.data().paging;
            this.form.date = '';
            this.handleCurrentChange(1)
        },
        pickerDate(e) {//选择时间
            if (!e) {
                this.paging.start_time = null;
                this.paging.end_time = null;
                return;
            }
            this.paging.start_time = e[0] / 1000;
            this.paging.end_time = e[1] / 1000;
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList()
        }
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}
</style>